<template>
  <div>
       <!-- 限时免费 -->
            <div class="booksite">
                <div class="title">
                    <h3><span></span>限时免费</h3>
                    <a>换一换</a>
                </div>
                <div class="bookfree">
                 <!-- <img v-for="(v,i) in imgsrc" :key="i" :src="v"> -->
                 <div  v-for="(list,i) in book_list" :key="i" >
                 <router-link :to="'/bookinfo/'+list.id" >
                   <img :src="list.imgs">
                       <p>{{list.name}}</p>
                 </router-link>
                       </div>
                </div>
            </div>
  </div>
</template>

<script>
import $axios from 'axios'
export default {
  data () {
    return {
      book_list: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      var url = '../static/json/book_list.json'
      $axios.get(url).then(res => {
        this.book_list = res.data
        // console.log(res.data)
      })
    }
  }
}
</script>
<style scoped>
a{
    text-decoration: none;
   color: black;
}
/* 限时免费 */
.bookfree{
    width: 100%;
    height: 145px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.bookfree div{
    margin-top: 3px;
    width: 20%;
    height: 78%;
    float: left;
    border: 1px #ccc solid;
    text-align: center;
    font-size: 14px;
    color: rgb(88, 88, 88)
}
.bookfree img{
  width: 100%;
  height: 100%;
}
.bookfree p{
    text-align: center;
}
.booksite{
    margin: 10px auto;
    background-color: rgba(204, 204, 204, 0.1);
    border-radius: 4px
}

.title{
    position: relative;
    margin: 0 auto;
    min-height: 35px;
    padding:5px 0 0 2%;
    border-bottom: 1px #ccc solid;
    margin-bottom: 5px;
}
.title span{
    border: 2px solid #1296db;
    height: 35px;
    margin-right: 10px
}
.title a{
    position: absolute;
    top: 30%;
    left: 80%;
    font-size: 14px;
    color: rgb(158, 157, 157)
}
</style>
